<template>
  <view class="mask">
    <view class="content">
      <view class="content-header">
        <text class="content-header-text">{{ upgradeInfo.title }}</text>
        <image class="content-header-image" src="/static/img/bg-upgrade.png" />
      </view>
      <view class="content-body">
        <scroll-view class="content-body-des" scroll-y>
          <text class="content-body-des-text" user-select selectable decode space="nbsp">
            {{ upgradeInfo.description || "adasdsadsad" }}
          </text>
        </scroll-view>

        <view class="progress" v-if="downloadInfo.downloading">
          <progress v-if="downloadInfo.downLoadPercent" class="progress-line" border-radius="35"
            :percent="downloadInfo.downLoadPercent" activeColor="#3DA7FF" show-info stroke-width="10" />
          <label class="progress-text">
            <text>安装包下载中...</text>
            <text v-if="downloadInfo.downloadedSize">
              ({{ downloadInfo.downloadedSize }}/{{ downloadInfo.packageFileSize }}M)
            </text>
          </label>
        </view>

        <button v-else @click="download" hover-class="tap-hover" class="content-button">
          立即下载
        </button>
      </view>
    </view>

    <uni-icons v-if="!upgradeInfo.forceUpdate" @click="close" class="close" type="close" size="45" color="#fff" />
  </view>
</template>

<script lang="ts" setup>
import { onBackPress, onLoad, onUnload } from '@dcloudio/uni-app';
import { reactive } from 'vue';

const upgradeInfo = reactive({
  title: "发现新版本",
  forceUpdate: false,
  description: "",
  upgradeURL: ""
});

const close = uni.navigateBack;

onLoad(() => uni.getStorage({
  key: "upgradeInfo",
  success(data: any) {
    data.forceUpdate = !!+data.forceUpdate;
    Object.assign(upgradeInfo, data);
  },
}));

onBackPress(() => Boolean(upgradeInfo.forceUpdate));

onUnload(() => uni.removeStorage({ key: "upgradeInfo" }));

const downloadInfo = reactive({
  downLoadPercent: 0,
  downloadedSize: 0,
  packageFileSize: 0,
  downloading: false
});

const download = () => {
  downloadInfo.downloading = true;
  // #ifdef APP-PLUS
  if (upgradeInfo.upgradeURL.split(".").pop() === "wgt") {
    const downloadTask = uni.downloadFile({
      url: upgradeInfo.upgradeURL,
      success: ({ tempFilePath, statusCode }) => {
        if (statusCode !== 200) {
          uni.showModal({
            title: "温馨提示",
            content: "下载失败, 请退出APP重新进入",
            showCancel: false,
            success: plus.runtime.restart,
          });
          return;
        }
        Object.assign(downloadInfo, {
          downLoadPercent: 0,
          downloadedSize: 0,
          packageFileSize: 0
        });
        plus.runtime.install(tempFilePath, { force: true }, plus.runtime.restart,
          () => uni.showToast({ title: "安装失败, 请重启APP", icon: "error" })
        );
      }
    });

    downloadTask.onProgressUpdate(({ progress, totalBytesWritten, totalBytesExpectedToWrite }) => {
      Object.assign(downloadInfo, {
        downLoadPercent: progress,
        downloadedSize: (totalBytesWritten / Math.pow(1024, 2)).toFixed(2),
        packageFileSize: (totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2)
      })
    });
  } else {
    // Android market://details?id=io.dcloud.diangong
    // Apple https://apps.apple.com/cn/app/id0123456789
    plus.runtime.openURL(upgradeInfo.upgradeURL);
  }
  // #endif

  // #ifdef H5
  location.href = upgradeInfo.upgradeURL;
  // #endif
}

</script>

<style lang="scss">
page {
  background: transparent;
}

.mask {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: column;
  /* #endif */
  justify-content: center;
  align-items: center;

  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .65);
}

.content {
  position: relative;
  top: 0;
  width: 600rpx;
  background-color: #fff;
  box-sizing: border-box;
  font-family: Source Han Sans CN;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;

  &-header {
    position: absolute;
    top: -195rpx;
    left: 0;
    width: 100%;
    height: 270rpx;

    &-text {
      font-size: 45rpx;
      font-weight: bold;
      color: #f8f8fa;
      position: absolute;
      top: 120rpx;
      left: 50rpx;
      z-index: 1;
    }

    &-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  &-body {
    margin: 70rpx 50rpx 30rpx;

    &-des {
      box-sizing: border-box;
      padding: 0 40rpx;
      height: 200rpx;
      text-align: left;

      &-text {
        font-size: 26rpx;
        color: #000;
        line-height: 50rpx;
        word-break: break-all;
      }
    }
  }

  &-button {
    text-align: center;
    flex: 1;
    font-size: 28rpx;
    font-weight: 400;
    color: #fff !important;
    border: none !important;
    border-radius: 40rpx;
    margin: 12rpx 18rpx 0;
    height: 80rpx;
    line-height: 80rpx;
    background-image: linear-gradient(to right, #1785ff, #3da7ff);
  }
}


.close {
  margin-top: 50rpx;
}

.progress {
  display: flex;
  flex-direction: column;
  width: 100%;

  &-line {
    height: 40rpx;
  }

  &-text {
    justify-content: space-around;
    margin-top: 12rpx;
    font-size: 28rpx;
  }

}
</style>
